var app = getApp();
var wxCharts = require('../../utils/wxcharts.js');
var lineChart = null;
Page({
  data: {
    navbar: ['今日', '本周', '本月', '本年'],
    currentTab: 0,
    isMainChartDisplay: true,
    //总列表循环
    twoList: [{
      id: 1,
      bgcolor: '#2fa5fd',
      twodata: [{
        'id': 15,
        'icon': 'icon',
        'textIcon': '客流量'
      }],
      onedata: [{
        'id': 15,
        'count': '300',
        'rise': '5%'
      }]
    }, {
      id: 2,
      bgcolor: '#0cd6b0',
      twodata: [{
        'id': '5%',
        'icon': 'icon',
        'textIcon': '服务率'
      }],
      onedata: [{
        'id': 15,
        'count': '300',
        'rise': '5%'
      }]
    }, {
      id: 3,
      bgcolor: '#ffb03a',
      twodata: [{
        'id': 15,
        'icon': 'icon',
        'textIcon': '开单数'
      }],
      onedata: [{
        'id': 15,
        'count': '300',
        'rise': '5%'
      }]
    }, {
      id: 4,
      bgcolor: '#ff5e87',
      twodata: [{
        'id': '5%',
        'icon': 'icon',
        'textIcon': '成交率'
      }],
      onedata: [{
        'id': 15,
        'count': '300',
        'rise': '5%'
      }]
    }],
    //本周店铺数据
    shoplist: [
      {
        shops: '店铺',
        custom: '客流量',
        counts: '开单数',
        turnover: '成交率'
      },
      {
        shops: '上海来福士广场',
        custom: '300',
        counts: '20',
        turnover: '3%'
      },
      {
        shops: '上海正大广场',
        custom: '200',
        counts: '20',
        turnover: '5%'
      },
      {
        shops: '中山公园',
        custom: '120',
        counts: '15',
        turnover: '6%'
      },
      {
        shops: '上海香港广场',
        custom: '150',
        counts: '20',
        turnover: '2%'
      }
      ,
      {
        shops: '佛罗伦萨小镇',
        custom: '110',
        counts: '20',
        turnover: '2%'
      }
    ]

  },
  navbarTap: function (e) {
    this.setData({
      currentTab: e.currentTarget.dataset.idx
    })
  },
  touchHandler: function (e) {
    console.log(lineChart.getCurrentDataIndex(e));
    lineChart.showToolTip(e, {
      // background: '#7cb5ec',
      format: function (item, category) {
        return category + ' ' + item.name + ':' + item.data
      }
    });
  },
  createSimulationData: function () {
    var categories = [];
    var data = [];
    for (var i = 8; i < 24; i++) {
      //categories.push('2016-' + (i + 1));
      categories.push(i + 1);
      data.push(Math.random() * (20 - 10) + 10);
    }
    // data[4] = null;
    return {
      categories: categories,
      data: data
    }
  },
  //本月
  createSimulationDataYear: function () {
    var categories = [];
    var data = [];
    for (var i = 0; i < 5; i++) {
      categories.push('第' + (i + 1) + '周');
      //categories.push(i + 1);
      data.push(Math.random() * (20 - 10) + 10);
    }
    // data[4] = null;
    return {
      categories: categories,
      data: data
    }
  },
  onReady: function (e) {

  },
  onLoad: function () {
    var that = this;
    /** 
     * 获取系统信息 
     */
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }

    });
    // 今日图表数据
    var windowWidth = 320;
    try {
      var res = wx.getSystemInfoSync();
      windowWidth = res.windowWidth;
    } catch (e) {
      console.error('getSystemInfoSync failed!');
    }
    //今日
    var simulationData = this.createSimulationData();
    lineChart = new wxCharts({
      canvasId: 'lineCanvas',
      type: 'line',
      categories: simulationData.categories,
      animation: true,
      dataLabel: true,
      // background: '#f5f5f5',
      series: [{
        name: '客流量',
        //data: simulationData.data,
        data: [8, 16, 54, 56, 30, 55, 22, 6, 2, 0, 19, 20, 13, 16, 19, 29],
        dataLabel: true,
        format: function (val, name) {
          return val;
        }
      }, {
        name: '成交率(%)',
        data: [2, 0, 0, 3, null, 4, 0, 0, 60, 0, 3, 6, 9, 3, 4, 4],
        format: function (val, name) {
          return val;
        }
      }],
      xAxis: {
        disableGrid: true,
      },
      yAxis: {
        // title: '成交金额 (万元)',
        format: function (val) {
          return val.toFixed(2);
        },
        min: 0,
        disabled: true
      },
      width: windowWidth,
      height: 200,

      dataPointShape: true,
      extra: {
        lineStyle: 'curve'
      }
    });
    //本周
    var simulationDataYear = this.createSimulationDataYear();
    lineChart = new wxCharts({
      canvasId: 'lineCanvas2',
      type: 'line',
      categories: simulationDataYear.categories,
      animation: true,
      dataLabel: true,
      // background: '#f5f5f5',
      series: [{
        name: '客流量',
        //data: simulationData.data,
        data: [8, 16, 54, 56, 30],
        dataLabel: true,
        format: function (val, name) {
          return val;
        }
      }, {
        name: '成交率(%)',
        data: [2, 0, 0, 3, 6],
        format: function (val, name) {
          return val;
        }
      }],
      xAxis: {
        disableGrid: true
      },
      yAxis: {
        // title: '成交金额 (万元)',
        format: function (val) {
          return val.toFixed(2);
        },
        min: 0,
        disabled: true
      },
      width: windowWidth,
      height: 200,

      dataPointShape: true,
      extra: {
        lineStyle: 'curve'
      }
    });
    //本月数据
    var simulationDataYear = this.createSimulationDataYear();
    lineChart = new wxCharts({
      canvasId: 'lineCanvas3',
      type: 'line',
      categories: simulationDataYear.categories,
      animation: true,
      dataLabel: true,
      // background: '#f5f5f5',
      series: [{
        name: '客流量',
        //data: simulationData.data,
        data: [8, 16, 54, 56, 30],
        dataLabel: true,
        format: function (val, name) {
          return val;
        }
      }, {
        name: '成交率(%)',
        data: [2, 0, 0, 3, 6],
        format: function (val, name) {
          return val;
        }
      }],
      xAxis: {
        disableGrid: true
      },
      yAxis: {
        // title: '成交金额 (万元)',
        format: function (val) {
          return val.toFixed(2);
        },
        min: 0,
        disabled: true
      },
      width: windowWidth,
      height: 200,

      dataPointShape: true,
      extra: {
        lineStyle: 'curve'
      }
    });


    //本年数据
    var simulationDataYear = this.createSimulationDataYear();
    lineChart = new wxCharts({
      canvasId: 'lineCanvas4',
      type: 'line',
      categories: simulationDataYear.categories,
      animation: true,
      dataLabel: true,
      // background: '#f5f5f5',
      series: [{
        name: '客流量',
        //data: simulationData.data,
        data: [8, 16, 54, 56, 30],
        dataLabel: true,
        format: function (val, name) {
          return val;
        }
      }, {
        name: '成交率(%)',
        data: [2, 0, 0, 3, 6],
        format: function (val, name) {
          return val;
        }
      }],
      xAxis: {
        disableGrid: true
      },
      yAxis: {
        // title: '成交金额 (万元)',
        format: function (val) {
          return val.toFixed(2);
        },
        min: 0,
        disabled: true
      },
      width: windowWidth,
      height: 200,

      dataPointShape: true,
      extra: {
        lineStyle: 'curve'
      }
    });
  },

  selectStore: function (e) {
    // wx.switchTab({
    //   url: '../details/details',
    // })

  }
});